<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/css/css.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" tyle="text/css"/>
    <script th:src="@{/js/jquery.min.1.8.2.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/js/common_js.js}" type="text/javascript"></script>
    <script th:src="@{/js/footer.js}" type="text/javascript"></script>
    <script th:src="@{/js/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <title>用户中心</title>
</head>
<script type="text/javascript" th:src="@{/js/layer/layer.js}">


    layui.config({
        base: '/static/cropper/' //layui自定义layui组件目录
    }).use(['form', 'croppers'], function () {
        var $ = layui.jquery
            , form = layui.form
            , croppers = layui.croppers
            , layer = layui.layer;

        //创建一个头像上传组件
        croppers.render({
            elem: '#test1'
            , saveW: 150     //保存宽度
            , saveH: 150   //保存高度
            , mark: 1 / 1    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "{:url('admin/upload/img_save',['type'=>'admin'])}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (data) { //上传完毕回调
                if (data.code == 1) {
                    $('#demo1').attr('src', data.url);
                    $('#test1').attr('data-src', data.url);  //成功返回路径存到数据库
                } else {
                    return layer.msg('上传失败');
                }
                /* $("#inputimgurl").val(url);
                 $("#srcimgurl").attr('src',url);*/
            }
        });

    });
</script>
<script type="text/javascript">
    $(document).ready(function () {

        axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
        new Vue({
            el: "#user",
            data: {
                myUser: {
                    account: '',
                    email: '',
                    password2: '',
                    picture: ''
                },
                oldPwd: '',
                nameTemp: '',
            }, mounted() {
                axios
                    .get("/ucenter/user/getmyuser", {
                        withCredentials: false,
                        headers: {jwt: localStorage.getItem("jwt")},
                    })
                    .then((r) => {
                        if ((r.data.code === 200)) {
                            this.myUser = r.data.data;
                            this.nameTemp = this.myUser.account;
                        }
                    });
            }, methods: {
                setHead() {
                    alert('head')
                },
                onSubmit() {
                    axios.post("/ucenter/user/updateUser", this.myUser, {
                        withCredentials: false,
                        headers: {jwt: localStorage.getItem("jwt")},
                    }).then((r) => {
                        if ((r.data.code === 200)) {
                            alert('修改成功！');
                        } else {
                            alert(r.data.msg);
                        }
                        this.myUser = r.data.data;
                        // let path="http://localhost:8080s"+r.data.data.picture;
                        // this.myUser.picture=path;
                    });
                }
            }
        })
    })
</script>
<body>
<div class="user_style clearfix" id="user">
    <div class="clearfix user">

        <div class="r_user_style">
            <div class="user_Borders">
                <div class="title_name">
                    <span class="name">个人信息设置</span>
                </div>
                <div class="about_user_info">
                    <form id="form1" name="form1" method="post" action="/ucenter/user/updateUser">
                        <div class="user_layout">
                            <div><label class="user_title_name">用户头像：</label><img :src="myUser.picture" alt="用户头像"
                                                                                  @click="setHead"/>
                            </div>



                            <ul>
                                <li><label class="user_title_name">旧 密码：</label><input name="account" type="text"
                                                                                       v-model="myUser.password2"
                                                                                       id="oldPwd"
                                                                                       class="add_text"/><i>*</i></li>
                                <li><label class="user_title_name">用户昵称：</label><input name="account" type="text"
                                                                                       v-model="myUser.account"
                                                                                       id="account"
                                                                                       class="add_text"/><i>*</i></li>

                                <li><label class="user_title_name">邮箱地址：</label><input name="mail" type="text"
                                                                                       v-model="myUser.email"
                                                                                       class="add_text"/><i>*</i></li>
                                <li><label class="user_title_name">账户积分：</label><input name="" type="text" value="100"
                                                                                       class="add_text" disabled/>
                                </li>
                            </ul>
                            <div class="operating_btn"><input name="name" type="text" @click="onSubmit" value="提交"
                                                              class="submit—btn"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
